<template>
  <div class="index_top">
    <div class="top_title">
      <!-- <i class="logo">
        <img src="../../assets/img/top_logo.png" alt="">
      </i> -->
      <span>信享付管理平台</span>
    </div>

    <div class="top_menu">
      <div class="A_menu fl" v-for="(item,index) in menuList" :key="index">
        <span
          @click="routerJump(item,index)"
          tag="span"
          :class="$route.meta.primaryMenuName == item.name?'active':''"
        >{{item.label}}</span>
      </div>
    </div>
    
    <div class="sys_menu">
      
      <el-popover
        placement="bottom"
        width="150px"
        trigger="click">
        <div class="setting_popover_box">
          <div class="setting_header">
            <i class="avatar">
              <img :src="avatar" alt="">
            </i>
            <div>
              <span>{{userInfo.realname}}</span>
              <span>{{userInfo.username}}</span>
            </div>
          </div>

          <div class="setting_body">
            <!-- <span class="title" slot="title">我的账户</span> -->
            <div class="btn_box">
              <el-button @click="setting" type="primary" size="mini">设 置</el-button>
              <el-button @click="LogOut" type="primary" size="mini">退 出</el-button>
            </div>
          </div>

        </div>
        <i class="icon_setting" slot="reference"></i>
      </el-popover>
    </div>


    <el-dialog @open="openDialog" :close-on-click-modal="false" :title="settingDialog.title" :visible.sync="settingDialog.show" width="450px" left>
      <el-form ref="userInfo"  :model="userInfo" label-width="80px" label-position="right">
        <div class="avatar_box">
          <img :src="avatar" style="width: 128px; height: 128px">
          
        </div>
        <el-form-item label="姓名 : " size="small">
          <el-input  v-model="userInfo.realname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱 :" size="small">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号 :" size="small">
          <el-input v-model="userInfo.mobile"></el-input>
        </el-form-item>
        <!-- <div style="text-align: right">
          <el-button @click="passwordShow" type="primary" size="mini">修改密码</el-button>
        </div> -->
      </el-form>
      
      <div slot="footer" class="dialog_footer">
        <el-button @click="passwordShow" type="primary" size="mini">修改密码</el-button>
        <el-button type="default" size="mini" @click="settingDialog.show = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" size="mini" v-if="settingDialog.type == 'update'" @click="updateUserSubmit">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog @open="openDialog" :close-on-click-modal="false" :title="passwordDialog.title" :visible.sync="passwordDialog.show" width="450px" left>
      <el-form ref="passwordForm"  :model="passwordForm" label-width="120px" label-position="right">
        <el-form-item label="旧密码 : " size="small">
          <el-input type="password" show-password v-model="passwordForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码 :" size="small">
          <el-input type="password" show-password v-model="passwordForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码 :" size="small">
          <el-input type="password" show-password v-model="passwordForm.passwordCopy"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog_footer">
        <el-button type="default" size="mini" @click="passwordDialog.show = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" size="mini" v-if="passwordDialog.type == 'update'" @click="updatePasswordSubmit">保 存</el-button>
      </div>
    </el-dialog>



  </div>
</template>



<script>
import { mapState, mapMutations, createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("public");

import upLoadFile from "@/components/assembly/upLoadFile";
let baseAvatar = require('../../assets/img/avatar.png');

export default {
  data() {
    return {
      activeNum: 0,
      btnLoading: false,
      companyInfo: {},
      userInfo: {},
      jwtAuth: {},
      loginTime: '',
      menuList: [],
      avatar: baseAvatar,

      settingDialog: {
        show: false,
        title: '设置/我的账户',
        type: 'update'
      },
      userDialog: {
        show: false,
        title: '系统用户/用户列表',
        type: 'detail'
      },
      passwordDialog: {
        show: false,
        title: '修改密码',
        type: 'update'
      },

      addForm: {},
      passwordForm: {
        oldPassword: '',
        password: '',
        passwordCopy: '',
      },

      upload_rules: [
        {
          rule: ["jpg", "jpeg", "png"],
          message: "文件类型必须为图片格式"
        }
      ],
      flatMenuList: [],
    };
  },

  created() {
    // this.userName = JSON.parse(localStorage.getItem("jwtAuth")).realname;
    if (localStorage.getItem("activeNum")) {
      this.activeNum = JSON.parse(localStorage.getItem("activeNum"));
    }
    this.jwtAuth = JSON.parse(localStorage.getItem("jwtAuth"))
    this.loginTime = localStorage.getItem("loginTime")
    // this.initData();
    this.searchUserInfo();
    this.initMenuList();


    // this.menuList = [
    //   {
    //     label: "数字采场",
    //     name: 'digitalMine'
    //   },
    //   {
    //     label: "资源管理",
    //     name: 'resourceManage'
    //   },
    //   {
    //     label: "生产计划",
    //     name: 'productionPlan'
    //   },
    //   {
    //     label: "穿爆管理",
    //     name: 'penetrationExplosionManagement'
    //   },
    //   {
    //     label: "生产调度",
    //     name: 'productionScheduling'
    //   },
    //   {
    //     label: "质量控制",
    //     name: 'qualityControl'
    //   },
    //   {
    //     label: "破碎加工",
    //     name: 'crushingProcessing'
    //   },
    //   {
    //     label: "设备管理",
    //     name: 'equipmentManagement'
    //   },
    //   {
    //     label: "监测监控",
    //     name: 'monitoring'
    //   },
    //   {
    //     label: "数据看版",
    //     name: 'dataViewing'
    //   },
    //   {
    //     label: "系统设置",
    //     name: 'systemSettings'
    //   },
    // ]
  },

  computed: {
    ...mapState(["adminMenu", "activeMenuItem"])
  },
  watch: {
    '$route.name'() {
      // console.log(this.$route)
    },
    activeNum(val) {
      localStorage.setItem("activeNum", val);
    },
    
  },
  methods: {
    ...mapActions(["formGet", "post", "getMenuList"]),
    ...mapMutations(["updateInfo"]),

    openDialog() {
      this.btnLoading = false;
    },

    initData() {
      let data = {
        id: this.jwtAuth.extMap.siteId
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.companyInfo = res;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    passwordShow() {
      this.passwordDialog.show = true; 
      this.settingDialog.show = false;
      this.passwordForm = {};
      this.$nextTick(() => {
        this.$refs.passwordForm.resetFields();
      })
    },

    updateUserSubmit() {
      let data = Object.assign(this.userInfo);
      this.btnLoading = true;
      this.post({
        API: 'updateUser',
        data: data
      }).then(res => {
        this.settingDialog.show = false;
        this.$message.success('修改成功');
        this.searchUserInfo();
      }).catch(err => {
        this.$message.error(err);
        this.btnLoading = false;
      })
    },

    updatePasswordSubmit() {
      let data = Object.assign(this.passwordForm);
      data.userId = this.jwtAuth.userId;

      if(data.password !== data.passwordCopy) {
        this.$message.error('两次密码输入不一样！');
        return false;
      }
      
      this.btnLoading = true;

      this.post({
        API: 'updatePassword',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        this.passwordDialog.show = false;
      }).catch(err => {
        this.$message.error(err);
        this.btnLoading = false;
      })
    },

    async initMenuList() {
      if(this.menuList.length == 0) {
        await this.getMenuList();
        this.menuList = this.$store.state.menuList
      }else {
        this.menuList = this.$store.state.menuList
      }
      
      this.handleFlatMenuList(this.menuList)
      this.handleRouterData();

    },

    handleFlatMenuList(list) {
      list.forEach(item => {
        if(item.uri) {
          let obj = {
            menuName: item.menuName,
            uri: item.uri
          }
          this.flatMenuList.push(obj);
        }

        if(item.childrenMenu) {
          this.handleFlatMenuList(item.childrenMenu)
        }
      })
      return this.flatMenuList
    },

    handleRouterData() {
      let routerArr = this.$router.options.routes[3].children;
      // console.log(routerArr)
      // console.log(this.menuList)
      let redirectObj = {}

      this.menuList.forEach(item => {
        if(!item.childrenMenu) {    // 只有一级菜单
          redirectObj[item.name] = null
        }else  {
          if(!item.childrenMenu[0].childrenMenu) {  // 只有二级菜单
            redirectObj[item.uri] = item.childrenMenu[0].uri
          }else {
            redirectObj[item.uri] = item.childrenMenu[0].childrenMenu[0].uri
          }
        }
      })

      // console.log(redirectObj)
      this.updateInfo(["redirectObj", redirectObj])


      for(let i=1; i<routerArr.length; i++) {

        if(this.flatMenuList.find(e => { return e.uri == routerArr[i].name })) {
          routerArr[i].meta.show = true
        }else {
          routerArr[i].meta.show = false
        }

        if(routerArr[i].children) {
          let childrenMenu = routerArr[i].children
          for(let k=0; k<childrenMenu.length; k++) {

            if(this.flatMenuList.find(e => { return e.uri == childrenMenu[k].name })) {
              childrenMenu[k].meta.show = true
            }else {
              childrenMenu[k].meta.show = false
            }
          }
        }
      }

    },

    routerJump(item, index) {
      // localStorage.setItem("menuKey", item.label);
      // if(item.name) {
      //   this.updateInfo(["activeMenuItem", item]);
      // }
      // this.activeNum = index;
      this.$router.push({ name: item.name });
      
    },

    setting() {
      this.formGet({
        API: 'searchUser',
        data: {
          id: this.jwtAuth.userId
        }
      }).then(res => {
        this.userInfo = res;
        this.settingDialog.show = true;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    searchUserInfo() {
      this.formGet({
        API: 'searchUser',
        data: {
          id: this.jwtAuth.userId
        }
      }).then(res => {
        this.userInfo = res;
      }).catch(err => {
        this.$message.error(err);
      })
    },


    LogOut() {
      this.$confirm("是否确认退出系统", {
        confirmButtonText: "确定",
        type: "warning"
      }).then(() => {
        localStorage.clear();
        this.$message.success("退出成功");
        this.$router.push({
          name: "login"
        });
        this.dialogShow = false;
      });
    },

    toPersonCenter() {
      this.$router.push({
        name: 'person_center'
      })
    },

    passe(e, type) {
      if (e.error) {
        this.$message.error(e.error);
      }
      if (e.success) {
        this.$message.success("上传成功");
        this.$nextTick(() => {
          this.$set(this.userInfo, type, e.success.fileId)
          this.$forceUpdate();
        })
      }

      console.log(this.userInfo)
    },

    clickImg(dom) {
      this.$refs[dom].clickUploadFile();
    },
  },

  components: {
    upLoadFile,
  },

  destroyed() {
    localStorage.removeItem("activeNum");
  },
  // props: ["listData"]
};
</script>
<style scoped>


img {
  display: block;
}

.index_top {
  width: 100%;
  height: 100%;
  padding: 0 36px;
  color: #ebeef5;
  background-size: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top_title {
  font-weight: normal;
  background-size: 100% auto;
  box-sizing: border-box;
  position: relative;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 20px;
}
.top_title .logo {
  left: 0;
  top: 0;
  width: 65px;
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 27px;
  display: inline-block;
}
.top_title .logo img {
  width: 100%;
}

.top_title span {
  color: #171717;
  text-shadow: 0.3px 0.3px #fff;
}

.index_top .top_menu {
  font-size: 14px;
  font-weight: 500;
  margin-left: 87px;
  box-sizing: border-box;
  margin-right: auto;
  display: flex;
}
.index_top .top_menu .A_menu {
  /* padding: 0 10px; */
  position: relative;
  cursor: pointer;
  width: 107px;
  text-align: center;
}
.index_top .top_menu .A_menu a {
  color: #ebeef5;
}
.index_top .top_menu .A_menu > span {
  display: inline-block;
  text-align: center;
  letter-spacing: 1px;
  z-index: 20;
  font-size: 16px;
  font-weight: bold;
  color: #575757;
}
.index_top .top_menu .A_menu > span:after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #999999;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.index_top .top_menu .A_menu:last-child > span:after{
  width: 0;
  height: 0;
}
.index_top .top_menu .A_menu > span.active {
  font-weight: bold;
  color: #587CF3;
  border-bottom: 3px solid #587CF3;
  border-radius: 1px;
}

.index_top .title {
  position: relative;
}

.sys_menu {
  display: flex;
}

.sys_menu i {
  display: inline-block;
  width: 26px;
  height: 25px;
  cursor: pointer;
  margin: 0 10px;
}
.sys_menu .icon_project {
  background: url('../../assets/img/icon_project1.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_notice {
  background: url('../../assets/img/icon_notice1.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_person {
  background: url('../../assets/img/icon_person1.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_setting {
  background: url('../../assets/img/icon_setting1.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_project:hover {
  background: url('../../assets/img/icon_project2.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_notice:hover {
  background: url('../../assets/img/icon_notice2.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_person:hover {
  background: url('../../assets/img/icon_person2.png') 0 0 no-repeat;
  background-size: contain;
}
.sys_menu .icon_setting:hover {
  background: url('../../assets/img/icon_setting2.png') 0 0 no-repeat;
  background-size: contain;
}

.setting_header {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 10px;
  /* box-sizing: border-box; */
}

.setting_header .avatar {
  width: 32px;
  height: 32px;
  display: inline-block;
}
.setting_header .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.setting_header > div {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin-left: 10px;
}
.setting_header > div span {
  flex-basis: 100%;
}


.setting_body .btn_box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.setting_body .btn_box > button {
  flex-basis: 100%;
}
.setting_body .btn_box > button:last-child {
  margin: 8px 0;
}
.setting_footer span {
  color: #B1B1B1;
  font-size: 14px;
  display: block;
}

.avatar_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  color: #fff;
}
.avatar_box img {
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 50%;
}


.notice_popover_box .title {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}
.notice_list {
  margin-top: 10px;
}
.notice_item {
  /* display: flex; */
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding: 5px 0;
}
.notice_item .time {
  color: #979797;
  font-size: 14px;
  float: right;
}

</style>


<style>

.index_top .el-badge__content {
  background-color: #D81E06;
  height: 15px;
  line-height: 15px;
  border: none;
  padding: 0 4px; 
}
.index_top .el-badge__content.is-fixed {
  right: 16px;
}

.el-popover__reference-wrapper {
  display: flex;
}
</style>